<template>
    <div class='container'>
        <div id='custom-id'></div>
    </div>
</template>

<script setup>
import echarts from '../chart'
import { onMounted, createApp, useSlots, h, defineComponent } from 'vue'
import { renderToString } from 'vue/server-renderer'
import Tooltip from './Tooltip.vue'
import { COLOR_THEME_ENUM } from './constant'
const slots = useSlots()
const child = slots.tooltip()
console.log(slots.tooltip())
console.log(Tooltip)
function createNode(list) {
    return list.map(item => {
        const childNode = Array.isArray(item.children) ? createNode(item.children) : item.children
        return h(item.type, item.props, childNode)
    })
}
const Com = defineComponent({
    render() {
        return h('div', { id: 'com' }, createNode(child))
    },
})
const myTooltipFormatter = async (params) => {
    const htmlTemplate = await renderToString(createApp(Com, { list: params }))
    return htmlTemplate
}
const props = defineProps({
    // 线形图数据
    chartDataLine: {
        type: Array,
        default: () => []
    },
    // 柱状图数据
    chartDataBar: {
        type: Array,
        default: () => []
    },
    // 颜色主题 default:默认色彩 functional：功能性色彩 same：同色系
    colorTheme: {
        type: String,
        default: 'default'
    },
    // 平滑曲线
    smooth: {
        type: Boolean,
        default: false
    },
    // 是否显示圆点
    showSymbol: {
        type: Boolean,
        default: false
    },
    // 线条类型 'dotted'虚线 'solid'实线
    type: {
        type: String,
        default: 'solid'
    },
    tooltipFormatter: {
        type: Function,
        default: () => { }
    }
})
const getThemeColor = () => {
    const colorList = COLOR_THEME_ENUM[props.colorTheme]
    console.log(colorList)
    props.chartDataLine.forEach(item => {
        item.itemStyle = {
            normal: {
                lineStyle: {
                    color: 'red'
                }
            }

        }
    })
}
getThemeColor()
const drawLine = () => {
    // 基于准备好的dom，初始化echarts实例
    let myChart = echarts.init(document.getElementById('custom-id'))
    // 绘制图表
    const option = {
        title: {
            show: false,
            text: ''
        },
        tooltip: {
            trigger: 'axis',
            // padding:0,
            // extraCssText:'padding:0'
            // formatter: props.tooltipFormatter,
            // formatter: (params, ticket, callback) => {
            // 	myTooltipFormatter(params).then((result) => {
            // 		callback(ticket, result)
            // 	})
            // 	return '计算中...'
            // }
        },
        grid: {
            top: '40',
            right: '10',
            left: '10',
            bottom: '30',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            // boundaryGap: false, // 标签不限制在坐标轴上
            axisLine: {//标线
                show: false
            },
            axisLabel: {//文字
                color: '#8B949E',
                fontSize: '20px',
            },
            axisTick: {//刻度线
                show: false
            },
        },
        yAxis: [
            {
                type: 'value',
                name: 'kwh'
            },
            {
                type: 'value',
                name: 'kwh',
                // axisLabel: {
                //     // formatter:null
                //     formatter: '{value} °C'
                // }
            }
        ],
        series: [
            {
                data: props.chartDataLine,
                type: 'line',
                smooth: props.smooth,//平滑曲线
                showSymbol: props.showSymbol,//是否默认展示圆点
                itemStyle: {
                    normal: {
                        color: null, //改变折线点的颜色
                        lineStyle: {
                            color: null, //改变折线颜色
                            type: props.type //线条类型
                        },
                    },
                },
                // 堆叠面积
                areaStyle: {
                    opacity: 0.2,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgba(36, 111, 229, 1)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(36, 111, 229, 0.1)'
                        }
                    ])
                }
            },
            {
                data: [50, 200, 124, 118, 335, 547, 360],
                type: 'line',
                showSymbol: false,//是否默认展示圆点
                itemStyle: {
                    normal: {
                        color: null, //改变折线点的颜色
                        lineStyle: {
                            color: null, //改变折线颜色
                            type: 'dotted',//虚线
                        },
                    },
                }
            },
            {
                name: 'Evaporation',
                type: 'bar',
                barWidth: 40,
                yAxisIndex: 1,
                tooltip: {
                    valueFormatter: function (value) {
                        return value + ' ml';
                    }
                },
                data: [
                    2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
                ]
            },
        ]
    }
    myChart.setOption(option)
    // myChart.on('mousemove', function (e) {
    //     console.log(e)
    // });
}

onMounted(() => {
    drawLine()
})
</script>
<style lang='less' scoped>
.container {
    margin-top: 40px;
    width: 100%;
    height: 800px;

    #custom-id {
        width: 100%;
        height: 350px;
    }

    #custom-id2 {
        width: 100%;
        height: 350px;
    }

}
</style>
